<template>
  <div class="page_content">
    <div class="list_module">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          @load="onLoad"
        >
          <van-cell-group v-for="item in dataSource" :key="item.id" @click="openPoster(item)">
            <van-cell :title="'类型'" :value="item.name" />
            <van-cell :title="'创建日期'" :value="item.createTime" />
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { param2Obj } from '@/utils'
import { judgeBrowser } from '@/utils/index.js'
import { PullRefresh } from 'vant'
export default {
  components: {
    [PullRefresh.name]: PullRefresh
  },
  data() {
    return {
      searchParams: { // 查询参数
        page: 0, // 页码
        size: 20 // 每页条数
      },
      refreshing: false, // 下拉刷新load
      loading: false, // 加载load
      dataSource: [], // 数据源
      finished: false, // 是否已全部加载
      finishedText: '没有更多了' // 已加载所有提示
    }
  },
  mounted() {
    const { iframe } = param2Obj(window.location.href)
    console.log(window.location.href, iframe)
    // 手机端或者PC端嵌入的iframe
    if (judgeBrowser().isMobile || iframe || this.$store.getters.iframe) {
      if (iframe && !this.$store.getters.iframe) {
        this.$store.dispatch('user/SetIframe', true).then(() => {})
      }
    } else {
      this.$router.push({ path: '/pc', query: { src: window.location.href }})
    }
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.searchParams.page = 1
      this.getDataSource()
    },
    // 上拉加载更多
    onLoad() {
      this.searchParams.page++
      this.loading = true
      this.getDataSource()
    },
    // 获取数据
    getDataSource() {
      this.$apis.honor.getHonorList().then(res => {
        // 赋值
        this.dataSource = res
        // 关闭选项
        this.refreshing = false
        this.loading = false
        this.finished = true
      })
    },
    // 打开海报页面
    openPoster(data) {
      this.$router.push({ path: '/birthday/poster', query: { honorId: data.id }})
    }
  }
}
</script>

<style lang="less" scoped>
.page-container {
  background-color: #fff;
  overflow: hidden;
  .list_module {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
